import React, { PureComponent } from 'react';
import './HYTabs.less';
import ClassNames from 'classnames';
import Tabs, { TabsProps } from 'antd/lib/tabs';

export declare type HyProps = {
  isInnerTab?: boolean; // 内部标签，通常用在有叠加的标签内部，一般可以与列表组合排版
  reactAble?: boolean; // 是否响应式
};

export declare type Props = TabsProps & HyProps;

export interface State {
  isMobile: boolean;
}

/**
 * 当是手机屏时会强制变成纵向的tab
 */
class HYTabs extends PureComponent<Props, State> {
  static HYTabPane = Tabs.TabPane;

  constructor(props: Props) {
    super(props);
    this.state = {
      isMobile: false
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render(): JSX.Element {
    let { className, tabPosition, animated, type, ...tabsProps } = this.props;
    let newClassName: string;
    let newAnimated = animated;
    let newType = type;
    newClassName = ClassNames('hy-tabs', className);
    if (this.props.isInnerTab) {
      newClassName = ClassNames(newClassName, 'hy-inner-tab');
    }

    let newTabPosition = tabPosition;
    if (this.state.isMobile) {
      newTabPosition = 'right';
    }

    if (newTabPosition === 'right') {
      newType = 'line'; // 右边显示不是卡片式
      newClassName = ClassNames(newClassName, 'hy-right-tab');
    }

    return (
      <Tabs
        className={newClassName}
        type={newType}
        animated={newAnimated}
        tabPosition={newTabPosition}
        {...tabsProps}
      />
    );
  }
}

export default HYTabs;
